<template>
    <div>
        <!-- 浅绿色的16进制是#07c160 -->
        <van-tabbar v-model="active" active-color="#07c160" @change="onChange">
            <van-tabbar-item icon="wap-home-o" name="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="eye-o" name="/cate">发现</van-tabbar-item>
            <van-tabbar-item icon="chat-o" name="/cart">聊天</van-tabbar-item>
            <van-tabbar-item icon="contact-o" name="/mine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 当前激活的tabbar
const active = ref(sessionStorage.getItem('active') ? sessionStorage.getItem('active') : '/home')
// 点击切换tabbar,并且跳转路由
// 注意：这里使用sessionStorage存储，因为切换页面后，会丢失路由信息
const onChange = (name: string) => {
    sessionStorage.setItem('active', name)
    router.push(name)
}
</script>

<style scoped></style>